<template>
  <div class="PersonalData">
    <header>
      <div class="back" @click="$router.go(-1)"></div>
      <span>个人信息</span>
    </header>
    <main>
      <div class="pic">
        <span>头像</span>
        <div class="tou">
          <img :src="info.img" alt="">
        </div>
      </div>
      <van-cell title="昵称" is-link :value="info.name" />
      <van-cell title="性别" is-link :value="info.sex" />
      <van-cell title="生日" is-link :value="info.birthday" />
      <van-cell title="地区" is-link :value="info.location" />
      <van-cell title="实名认证" is-link value="未认证" />
      <van-cell title="我的账号" is-link :value="info.phone" />
      <van-cell title="修改密码" is-link value="仅限手机注册用户" />
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info:{
        img:"https://img0.baidu.com/it/u=661161858,172661768&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        name:"马兴祖",
        sex:"男",
        birthday:"1999-08-03",
        location:"中国",
        phone:"13523633801",
      }
    }
  },
};
</script>

<style scoped lang="scss">
header {
  width: 100%;
  height: 100px;
  border-bottom: 1px solid #c0c0c0;
  text-align: center;
}
header .back {
  float: left;
  margin-top: 32.5px;
  margin-left: 20px;
  width: 19px;
  height: 35px;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/pshvf6oyob5e2v34gvjdf963utrfrmi7si6b18e2f0-ee71-4c15-a09d-11de00a665d4) -1px -1px
    no-repeat;
  background-size: 20px 37px;
}
header span {
  line-height: 100px;
  font-size: 30px;
}
.PersonalData {
  main {
    .pic {
      font-size: 30px;
      line-height: 150px;
      width: 100%;
      height: 150px;
      background-color: white;
      span{
        margin-left: 15px;
      }
      .tou{
        float: right;
        width: 100px;
        height: 100px;
        background-color: burlywood;
        margin-top: 25px;
        margin-right: 20px;
        border-radius: 50%;
        overflow: hidden;
        img{
          width: 100px;
          height: 100px;
        }
      }
    }
    height: 1230px;
    background-color: #f6f6f6;
    .van-cell {
      margin-top: 5px;
      height: 50px;
      line-height: 35px;
      font-size: 15px;
      .van-cell__right-icon {
        line-height: 35px;
      }
    }
    .van-cell::after {
      width: 100%;
      border: none;
    }
  }
}
</style>
